<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>裁判登录</title>
    <link href="css/main.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="js/main.js"></script>
    <style>
        body {
            width: 100%;
            height: 100%;
            font-family: 微软雅黑, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
            user-select: none;
            animation-duration: 1s;
        }
    </style>

</head>
<body>
<div id="app">
    <header class="xHeader" id="head">
        {{title}}
    </header>
    <form class="xForm">
        <div>
            <label class="xInputTittle">主持人用户名</label>
            <label for="owner"></label><input class="xInput" id="owner" type="text" v-model="ballot">
            <p class="xPrompt">输入本场投票主持人的登录名</p>
            <div class="clapboard"></div>
        </div>
        <div>
            <label class="xInputTittle">登录名</label>
            <label for="name"></label><input class="xInput" id="name" type="text" v-model="jname">
            <p class="xPrompt">输入您的裁判登录名</p>
            <div class="clapboard"></div>
        </div>
        <div>
            <label class="xInputTittle">密码</label>
            <label for="passwd"></label><input class="xInput" id="passwd" type="password" v-model="passwd">
            <p class="xPrompt" id="tip">设置您的密码</p>
            <div class="clapboard"></div>
        </div>
        <div>
            <label class="xInputTittle">验证码</label>
            <label for="captcha"></label><input class="xInput" id="captcha" type="text" v-model="captcha">
            <p class="xPrompt">输入您在下图中看到的文字, 若看不清请点击切换</p>
            <img alt=" 验证码加载失败" id="captchaImg" :src="urls.captchaSrc" @click="refreshCaptcha()">
            <div class="clapboard"></div>
        </div>
    </form>
    <div style="width: 61.8%; margin: auto">
        <div class="xButton xLongButton" id="login" style="margin: 18px" @click="login()" @mouseenter="menter" @mouseleave="mleave">
            <div class="centerText">登录>></div>
        </div>
    </div>
</div>

<script type="application/javascript">
    const app = new Vue({
        el:"#app",
        data:{
            urls:{
                captchaSrc:"/captcha/get",
                login: "judge/login"
            },
            texts:{
                wrongCaptcha: "验证码错误，请重新输入",
                wrongPasswd: "用户名或密码错误",
                unknownErr: "未知错误."
            },
            axPost:{},
            axGet:{},
            ballot:"",
            jname:"",
            passwd:"",
            captcha:"",
            lastCaptchaTime:0,
            title:"裁判登录, 欢迎使用!"
        },
        methods:{
            menter: function (obj) {
                obj.currentTarget.style.backgroundColor = "#3a3f4d";
            },
            mleave: function (obj) {
                obj.currentTarget.style.backgroundColor = "#555555";
            },
            refreshCaptcha: function () {
                if (new Date().getTime() - this.lastCaptchaTime < 100 * 1000) {
                    this.title = "验证码每100秒只能获取一次, 请稍等.";
                    return;
                }
                this.lastCaptchaTime = new Date().getTime();
                this.captchaSrc = "/captcha/get?t=1" + this.lastCaptchaTime;
            },
            login: function () {
                this.axPost
                    .post(this.urls.login, stringify({
                        owner: this.ballot,
                        name:this.jname,
                        passwd: this.passwd,
                        captcha: this.captcha
                    }))
                    .then(resp => {
                        console.log(resp)
                        if (resp.data.status) {
                            window.location.href = "voting.html";
                        } else {
                            if (resp.data.value === "captcha") {
                                this.title = this.texts.wrongCaptcha;
                                this.refreshCaptcha();
                                return;
                            }
                            if (resp.data.value === "nameOrPasswd") {
                                this.title = this.texts.wrongPasswd;
                                return;
                            }
                            this.title = this.texts.unknownErr;
                        }
                    })
                    .catch(() => {
                        this.title = "数据请求似乎出错了, 请刷新页面重试或检查网络";
                    })
            }
        },
        created: function () {
            this.axGet = axios.create({
                url: window.location.host,
                method: "get",
                responseType: 'json'
            });
            this.axPost = axios.create({
                url: window.location.host,
                method: "post",
                responseType: "json",
                contentType: "application/x-www-form-urlencoded"
            });
        }
    })
</script>
</body>
</html>